<template>
  <div id="choose-card-container">
    <div class="btns">
      <button :class="{btn:true,active:currentCard===0}" @click="$emit('changeCard',0)">未处理({{numbers[0]}})</button>
      <button :class="{btn:true,active:currentCard===1}" @click="$emit('changeCard',1)">处理中({{numbers[1]}})</button>
      <button :class="{btn:true,active:currentCard===2}" @click="$emit('changeCard',2)">已处理({{numbers[2]}})</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'choose-card',
  props: {
    numbers: {
      type: Array,
      required: true
    },
    currentCard: {
      type: Number,
      default: 1
    }
  }
}
</script>

<style scoped>
.btns{
  display: flex;
  justify-content: space-around;
}
.btn {
  width: 240px;
  background: rgb(2, 72, 142);
  height: 60px;
  border: 0;
  margin-right: 23px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
}
.btn:hover,
.btn.active {
  background-color: rgb(49, 150, 250);
}
</style>
